<template>
	<el-dialog
		custom-class="dialog-title"
		class="custom-dialog-header"
		v-model="dialogVisible"
		:width="width"
		:fullscreen="fullscreen"
		draggable
		:show-close="false"
		:close-on-click-modal="false"
		destroy-on-close
		center
		@close="close"
	>
		<template #header>
			<div class="custom-header">
				<span class="mx-7">{{ title }}</span>
				<div class="right-btn">
					<!-- 全屏按钮 -->

					<span @click="close" class="mr-7">关闭</span>
				</div>
			</div>
		</template>
		<!-- 弹窗中间 -->
		<el-scrollbar>
			<div class="max-h-[600px]">
				<slot />
			</div>
		</el-scrollbar>

		<!-- 弹窗底部 -->
		<template v-if="footer" #footer>
			<slot name="footer">
				<el-button class="w-20 !h-8" @click="close">取消</el-button>
				<el-button
					class="w-20 !h-8"
					type="primary"
					:loading="submitLoading"
					@click="saveSubmit"
				>
					{{ submitText }}
				</el-button>
			</slot>
		</template>
	</el-dialog>
</template>
<script setup lang="ts" name="ComPop">
import { ref, watch } from 'vue';

const props = withDefaults(
	defineProps<{
		modelValue: boolean;
		title: string;
		width?: string | number;
		footer?: boolean;
		submitText?: string;
		submitLoading?: boolean;
		saveSubmit?: () => void;
	}>(),
	{
		width: '50%',
		submitLoading: false,
		submitText: '确定',
		footer: true,
	},
);

let emits = defineEmits(['update:modelValue', 'saveSubmit', 'close']); //全屏

const dialogVisible = ref(props.modelValue); //显示弹窗
const fullscreen = ref(false); //是否全屏

const close = () => {
	dialogVisible.value = false;
	emits('close');
	emits('update:modelValue', false);
}; //保存表单方法
const saveSubmit = () => {
	emits('saveSubmit', props.saveSubmit);
}; //监听value

watch(
	() => props.modelValue,
	(value) => {
		if (value == true) {
			fullscreen.value = false;
		}
		dialogVisible.value = value;
	},
);
</script>

<style lang="scss">
.custom-dialog-header {
	padding: 0;
	border-radius: 10px;
	overflow: hidden;
	.el-dialog__header {
		padding-bottom: 0;
	}

	.el-dialog__footer {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0;
		height: 70px;
		background: #ffffff;
		box-shadow: 0px -4px 11px 0px rgba(0, 0, 0, 0.04);
		border-radius: 2px;
		margin-top: 30px;
	}
}
</style>

<style scoped lang="scss">
.dialog-title .el-dialog__header {
	background-color: #3ca1ff !important;
	margin-right: 0px;
	.el-dialog__title,
	.el-dialog__headerbtn .el-dialog__close {
		color: #ffffff;
	}
}

.custom-header {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	height: 54px;

	background: linear-gradient(90deg, #4d6ff7 0%, #55b8ff 100%);
	box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.04);
	color: #fff;
	position: relative;
}

.custom-header .right-btn {
	height: 40px;
	cursor: pointer;
	text-align: center;
	line-height: 40px;
}

.custom-header .right-btn .el-icon {
	margin-right: 10px;
	height: 100%;
}

.custom-header .right-btn .el-icon:hover {
	color: #fff000;
}

.form-body {
	padding-right: 120px;
	height: 500px;
	margin-bottom: 52px;
}

.form-body-new {
	padding-right: 120px;
	height: 750px;
	margin-bottom: 52px;
}
</style>
